<template>
  <div>
    <div class="header">
      <div class="logo">校园二手交易平台</div>
      <div class="nav">
        <div v-for="item in routes" :key="item.path"
             :class="{active: $route.path === item.path}" class="nav-item"
             @click="$router.push(item.path)">{{ item.text }}
        </div>
      </div>
      <div>
        <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
          <div class="avatar-wrapper">
            <img :src="avatar" class="user-avatar">
            <i class="el-icon-caret-bottom"/>
          </div>
          <el-dropdown-menu slot="dropdown">

            <el-dropdown-item v-for="item in my_routes" :key="item.path"
                              @click.native="$router.push(item.path)">
              <span>{{ item.text }}</span>
            </el-dropdown-item>
            <el-dropdown-item divided @click.native="logout">
              <span>退出系统</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
    <router-view/>
  </div>
</template>

<script>
import {mapGetters} from "vuex";

export default {
  name: "index",
  computed: {
    ...mapGetters([
      'avatar',
    ])
  },
  data() {
    return {
      my_routes: [
        {path: '/my/goods', text: '我的商品'},
        {path: '/my/orders', text: '我的订单'},
        {path: '/my/collect', text: '我的收藏'},
        {path: '/my/address', text: '我的地址'},
        {path: '/my/help', text: '我的论坛'},
        {path: '/my/feedback', text: '我的反馈'},
        {path: '/my/info', text: '个人中心'},
      ],
      routes: [
        {path: '/home', text: '热卖专区'},
        {path: '/help', text: '校园论坛'},
        {path: '/feedback', text: '留言反馈'},
        {path: '/chat', text: '聊天消息'},
      ]

    }
  },
  methods: {
    async logout() {
      this.$confirm('确定注销并退出系统吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$store.dispatch('LogOut').then(() => {
          location.href = '/index';
        })
      }).catch(() => {
      });
    }
  }
}
</script>

<style scoped lang="scss">
.active {
  color: #007bff;
  font-weight: bold;
  font-size: 18px;
  font-family: '微软雅黑', sans-serif;
}

.header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background-color: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}

.logo {
  font-size: 1.5em;
  font-weight: bold;
}

.nav {
  display: flex;
}

.nav-item {
  margin: 0 15px;
  cursor: pointer;
  transition: color 0.3s;

  &:hover {
    color: #007bff;
  }
}

.right-menu-item {
  display: inline-block;
  padding: 0 8px;
  height: 100%;
  font-size: 18px;
  color: #5a5e66;
  vertical-align: text-bottom;

  &.hover-effect {
    cursor: pointer;
    transition: background .3s;

    &:hover {
      background: rgba(0, 0, 0, .025)
    }
  }
}

.avatar-container {
  margin-right: 30px;

  .avatar-wrapper {
    margin-top: 5px;
    position: relative;

    .user-avatar {
      cursor: pointer;
      width: 40px;
      height: 40px;
      border-radius: 10px;
    }

    .el-icon-caret-bottom {
      cursor: pointer;
      position: absolute;
      right: -20px;
      top: 25px;
      font-size: 12px;
    }
  }
}
</style>
